<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/14
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="${pageContext.request.contextPath}/css/css_whir.css" rel="stylesheet" type="text/css" />
    <title>闲置物品详情页</title>
    <script src="${pageContext.request.contextPath}/script/slider.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/script/Columns.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/script/scrollpic.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background: url("${pageContext.request.contextPath}/images/bg.jpg") no-repeat fixed;
        }

        #qq {
            width: 600px;
            /*宽*/
            height: 170px;
            /*高*/
            background: #fff;
            /*背景颜色*/
            margin: 50px auto 30px;
            border-radius: 5px;
            /*Html5 圆角*/
        }

        #qq p {
            font-size: 12px;
            color: #666;
            font-family: "微软雅黑";
            line-height: 45px;
            text-indent: 20px;
        }

        #qq .message {
            width: 560px;
            height: 70px;
            margin: 0 auto;
            overflow: hidden;
            outline: none;
            border: 1px solid #ddd;
            padding: 8px;
            box-sizing: border-box;
            font-size: 14px;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #778899 0%, #333 100%);
            /*粗细 风格 颜色*/
        }

        #qq .But {
            width: 560px;
            height: 35px;
            margin: 15px auto 0px;
            position: relative;
            /*相对，参考对象*/
        }

        #qq .But img.bq {
            float: left;
            /*左浮动*/
        }

        #qq .But span.submit {
            width: 80px;
            height: 30px;
            background: #ff8140;
            display: block;
            float: right;
            /*右浮动*/
            line-height: 30px;
            border-radius: 5px;
            cursor: pointer;
            /*手指*/
            color: #fff;
            font-size: 12px;
            text-align: center;
            font-family: "微软雅黑";
        }

        /*face begin*/
        #qq .But .face {
            width: 440px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 0 12px #666;
            position: absolute;
            /*绝对定位*/
            top: 21px;
            left: 15px;
            display: none;
            /*隐藏*/
        }

        #qq .But .face ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            box-sizing: border-box;
        }

        #qq .But .face ul li {
            width: 30px;
            height: 30px;
            list-style-type: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*msgCon begin*/
        .msgCon {
            width: 600px;
            margin: 0px auto;
            margin-bottom: 60px;
        }

        .msgCon .msgBox {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 16px;
            border-radius: 4px;
        }

        .msgCon .msgBox .headUrl {
            width: 100%;
            height: 60px;
            border-bottom: 1px dotted #ddd;
            display: flex;
            align-items: center;
        }

        .msgCon .msgBox .headUrl img {
            width: 46px;
            height: 46px;
            border-radius: 50%
        }

        .msgCon .msgBox .headUrl div {
            flex: 1;
            display: flex;
            flex-flow: column;
            font-size: 16px;
            margin-left: 16px;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
        }

        .msgCon .msgBox .headUrl div .time {
            font-size: 14px;
            margin-top: 6px;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
        }

        .msgCon .msgBox .headUrl a {
            font-size: 14px;
            padding: 10px;
            color: salmon;
            cursor: pointer;
        }

        .msgCon .msgBox .msgTxt {
            font-size: 14px;
            color: #666;
            min-height: 40px;
            line-height: 24px;
            padding: 10px;
            box-sizing: border-box;
            word-wrap: break-word;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #778899 0%, #333 100%);
        }
    </style>
</head>
<body>

<!--商品分类 E-->
<h3 style="line-height: 20px;font-size: 16px;color: red;background-color: #aa9b73">当前位置:<a href="${pageContext.request.contextPath}" >首页</a>><a href=""> 闲置物品</a>><a href="">商品详情页</a> </h3>
<div class="mainbox">

    <!--商品简介 S-->
    <div class="c-top">
        <div class="c-pic">
            <div class="bi-pic"><img src="${pageContext.request.contextPath}/images/5.jpg" width="385" height="563" /></div>

        </div>
        <div class="c-pd">
            <div class="c-T" style="background-color: #FFFFFF;width: 600px"> 耐克篮球鞋  99新 </div>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">发布人：<span style="color:#FF7E15;font-size: 17px">李四</span></p>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">商品类型：<span style="color:#FF7E15;font-size: 17px">鞋子</span></p>
            <p></p>
            <p style="font-size: 15px">价 格：<span style="color: #FF0036;font-size: 18px;background-color: #e9e9e9">￥120.00元</span></p>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">联系电话：<span style="color:#FF7E15;font-size: 17px">18591086232</span></p>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">发布时间：：<span style="color:#FF7E15;font-size: 17px">2020-2-23 14：20：14</span></p>
            <p style="margin:50px 0 40px; height:38px;"><a href="22"><img src="images/shouc.jpg" /></a>  </p>
            <div class="tip">
                <p><em style="color:#f00">商品描述：</em> 2020年1月买的，未拆。包装，发票都在</p>
            </div>
        </div>
    </div>
    <!--商品简介 E-->
</DIV>
</div>
<!--评论-->


<div id="qq">

    <p style="font-size: 17px ;color: #FFFFFF"> 你有什么想说的吗?</p>
    <div class="message" contentEditable='true'>

    </div>
    <div class="But">
        <img src="${pageContext.request.contextPath}/images/bba_thumb.gif" class='bq' />
        <span class='submit'>发表</span>

        <!--face begin-->
        <div class="face">
            <ul>
                <li><img src="${pageContext.request.contextPath}/images/smilea_thumb.gif" title="呵呵]"></li>
                <li><img src="${pageContext.request.contextPath}/images/tootha_thumb.gif" title="嘻嘻]"></li>
                <li><img src="${pageContext.request.contextPath}/images/laugh.gif" title="[哈哈]"></li>
                <li><img src="${pageContext.request.contextPath}/images/tza_thumb.gif" title="[可爱]"></li>
                <li><img src="${pageContext.request.contextPath}/images/kl_thumb.gif" title="[可怜]"></li>
                <li><img src="${pageContext.request.contextPath}/images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
                <li><img src="${pageContext.request.contextPath}/images/cj_thumb.gif" title="[吃惊]"></li>
                <li><img src="${pageContext.request.contextPath}/images/shamea_thumb.gif" title="[害羞]"></li>
                <li><img src="${pageContext.request.contextPath}/images/zy_thumb.gif" title="[挤眼]"></li>
                <li><img src="${pageContext.request.contextPath}/images/bz_thumb.gif" title="[闭嘴]"></li>
                <li><img src="${pageContext.request.contextPath}/images/bs2_thumb.gif" title="[鄙视]"></li>
                <li><img src="${pageContext.request.contextPath}/images/lovea_thumb.gif" title="[爱你]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sada_thumb.gif" title="[泪]"></li>
                <li><img src="${pageContext.request.contextPath}/images/heia_thumb.gif" title="[偷笑]"></li>
                <li><img src="${pageContext.request.contextPath}/images/qq_thumb.gif" title="[亲亲]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sb_thumb.gif" title="[生病]"></li>
                <li><img src="${pageContext.request.contextPath}/images/mb_thumb.gif" title="[太开心]"></li>
                <li><img src="${pageContext.request.contextPath}/images/ldln_thumb.gif" title="[懒得理你]"></li>
                <li><img src="${pageContext.request.contextPath}/images/yhh_thumb.gif" title="[右哼哼]"></li>
                <li><img src="${pageContext.request.contextPath}/images/zhh_thumb.gif" title="[左哼哼]"></li>
                <li><img src="${pageContext.request.contextPath}/images/x_thumb.gif" title="[嘘]"></li>
                <li><img src="${pageContext.request.contextPath}/images/cry.gif" title="[衰]"></li>
                <li><img src="${pageContext.request.contextPath}/images/wq_thumb.gif" title="[委屈]"></li>
                <li><img src="${pageContext.request.contextPath}/images/t_thumb.gif" title="[吐]"></li>
                <li><img src="${pageContext.request.contextPath}/images/k_thumb.gif" title="[打哈气]"></li>
                <li><img src="${pageContext.request.contextPath}/images/bba_thumb.gif" title="[抱抱]"></li>
                <li><img src="${pageContext.request.contextPath}/images/angrya_thumb.gif" title="[怒]"></li>
                <li><img src="${pageContext.request.contextPath}/images/yw_thumb.gif" title="[疑问]"></li>
                <li><img src="${pageContext.request.contextPath}/images/cza_thumb.gif" title="[馋嘴]"></li>
                <li><img src="${pageContext.request.contextPath}/images/88_thumb.gif" title="[拜拜]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sk_thumb.gif" title="[思考]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sweata_thumb.gif" title="[汗]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sleepya_thumb.gif" title="[困]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sleepa_thumb.gif" title="[睡觉]"></li>
                <li><img src="${pageContext.request.contextPath}/images/money_thumb.gif" title="[钱]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sw_thumb.gif" title="[失望]"></li>
                <li><img src="${pageContext.request.contextPath}/images/cool_thumb.gif" title="[酷]"></li>
                <li><img src="${pageContext.request.contextPath}/images/hsa_thumb.gif" title="[花心]"></li>
                <li><img src="${pageContext.request.contextPath}/images/hatea_thumb.gif" title="[哼]"></li>
                <li><img src="${pageContext.request.contextPath}/images/gza_thumb.gif" title="[鼓掌]"></li>
                <li><img src="${pageContext.request.contextPath}/images/dizzya_thumb.gif" title="[晕]"></li>
                <li><img src="${pageContext.request.contextPath}/images/bs_thumb.gif" title="[悲伤]"></li>
                <li><img src="${pageContext.request.contextPath}/images/crazya_thumb.gif" title="[抓狂]"></li>
                <li><img src="${pageContext.request.contextPath}/images/h_thumb.gif" title="[黑线]"></li>
                <li><img src="${pageContext.request.contextPath}/images/yx_thumb.gif" title="[阴险]"></li>
                <li><img src="${pageContext.request.contextPath}/images/nm_thumb.gif" title="[怒骂]"></li>
                <li><img src="${pageContext.request.contextPath}/images/hearta_thumb.gif" title="[心]"></li>
                <li><img src="${pageContext.request.contextPath}/images/unheart.gif" title="[伤心]"></li>
                <li><img src="${pageContext.request.contextPath}/images/pig.gif" title="[猪头]"></li>
                <li><img src="${pageContext.request.contextPath}/images/ok_thumb.gif" title="[ok]"></li>
                <li><img src="${pageContext.request.contextPath}/images/ye_thumb.gif" title="[耶]"></li>
                <li><img src="${pageContext.request.contextPath}/images/good_thumb.gif" title="[good]"></li>
                <li><img src="${pageContext.request.contextPath}/images/no_thumb.gif" title="[不要]"></li>
                <li><img src="${pageContext.request.contextPath}/images/z2_thumb.gif" title="[赞]"></li>
                <li><img src="${pageContext.request.contextPath}/images/come_thumb.gif" title="[来]"></li>
                <li><img src="${pageContext.request.contextPath}/images/sad_thumb.gif" title="[弱]"></li>
                <li><img src="${pageContext.request.contextPath}/images/lazu_thumb.gif" title="[蜡烛]"></li>
                <li><img src="${pageContext.request.contextPath}/images/clock_thumb.gif" title="[钟]"></li>
                <li><img src="${pageContext.request.contextPath}/images/cake.gif" title="[蛋糕]"></li>
                <li><img src="${pageContext.request.contextPath}/images/m_thumb.gif" title="[话筒]"></li>
                <li><img src="${pageContext.request.contextPath}/images/weijin_thumb.gif" title="[围脖]"></li>
                <li><img src="${pageContext.request.contextPath}/images/lxhzhuanfa_thumb.gif" title="[转发]"></li>
                <li><img src="${pageContext.request.contextPath}/images/lxhluguo_thumb.gif" title="[路过这儿]"></li>
                <li><img src="${pageContext.request.contextPath}/images/bofubianlian_thumb.gif" title="[bofu变脸]"></li>
                <li><img src="${pageContext.request.contextPath}/images/gbzkun_thumb.gif" title="[gbz困]"></li>
                <li><img src="${pageContext.request.contextPath}/images/boboshengmenqi_thumb.gif" title="[生闷气]"></li>
                <li><img src="${pageContext.request.contextPath}/images/chn_buyaoya_thumb.gif" title="[不要啊]"></li>
                <li><img src="${pageContext.request.contextPath}/images/daxiongleibenxiong_thumb.gif" title="[dx泪奔]"></li>
                <li><img src="${pageContext.request.contextPath}/images/cat_yunqizhong_thumb.gif" title="[运气中]"></li>
                <li><img src="${pageContext.request.contextPath}/images/youqian_thumb.gif" title="[有钱]"></li>
            </ul>
        </div>
        <!--face end-->
    </div>
</div>
<!--qq end-->
<!--msgCon begin-->
<div class="msgCon"></div>




<!--底部结束-->

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    //从缓存中获取数据并渲染
    let msgBoxList = JSON.parse(window.localStorage.getItem('msgBoxList')) || [];
    innerHTMl(msgBoxList)

    //点击小图片，显示表情
    $(".bq").click(function (e) {
        $(".face").slideDown(); //慢慢向下展开
        e.stopPropagation(); //阻止冒泡事件
    });

    //在桌面任意地方点击，关闭表情框
    $(document).click(function () {
        $(".face").slideUp(); //慢慢向上收
    });

    //点击小图标时，添加功能
    $(".face ul li").click(function () {
        let simg = $(this).find("img").clone();
        $(".message").append(simg); //将表情添加到输入框
    });

    //点击发表按扭，发表内容
    $("span.submit").click(function () {
        let txt = $(".message").html(); //获取输入框内容
        if (!txt) {
            $('.message').focus(); //自动获取焦点
            return;
        }
        let obj = {
            msg: txt
        }

        innerHTMl([obj]) //渲染当前输入框内容
        $('.message').html('') // 清空输入框

    });

    //删除当前数据
    $("body").on('click', '.del', function () {
        let index = $(this).parent().parent().index();
        msgBoxList.splice(index, 1)
        window.localStorage.setItem('msgBoxList', JSON.stringify(msgBoxList)) //将数据保存到缓存
        $(this).parent().parent().remove()
    })

    //渲染html
    //渲染html
    function innerHTMl(List) {
        List = List || []
        List.forEach(item => {
            let str =
                `<div class='msgBox'>
						<div class="headUrl">
							<img src='../../../images/tx.jpg' width='50' height='50'/>
							<div>
								<span class="title">${}</span>
								<span class="time">2020-03-03 10：23：27</span>
							</div>
							<a class="del">删除</a>
						</div>
						<div class='msgTxt'>

						${item.msg}
						</div>
					</div>`
            $(".msgCon").prepend(str);
        })
    }

</script>
</body>
</html>